<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .swiper {
        width: 480px;
        height: 640px;
      }

      .swiper-slide {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        font-size: 22px;
        font-weight: bold;
        color: #fff;
      }
      .swiper-slide p {
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 12px;
        padding: 20px;
        opacity: 0.5;
      }
      .swiper-slide h3 {
        position: absolute;
        right: 0;
        top: 10px;
        width: 30px;
        padding: 5px 0;
      }
      .swiper-slide:nth-child(1n),
      .swiper-slide:nth-child(1n) h3 {
        background-color: rgba(206, 17, 17, 0.4);
      }

      .swiper-slide:nth-child(2n),
      .swiper-slide:nth-child(2n) h3 {
        background-color: rgba(0, 140, 255, 0.4);
      }

      .swiper-slide:nth-child(3n),
      .swiper-slide:nth-child(3n) h3 {
        background-color: rgba(10, 184, 111, 0.4);
      }

      .swiper-slide:nth-child(4n),
      .swiper-slide:nth-child(4n) h3 {
        background-color: rgba(211, 122, 7, 0.4);
      }

      .swiper-slide:nth-child(5n),
      .swiper-slide:nth-child(5n) h3 {
        background-color: rgba(118, 163, 12, 0.4);
      }

      .swiper-slide:nth-child(6n),
      .swiper-slide:nth-child(6n) h3 {
        background-color: rgba(180, 10, 47, 0.4);
      }

      .swiper-slide:nth-child(7n),
      .swiper-slide:nth-child(7n) h3 {
        background-color: rgba(35, 99, 19, 0.4);
      }

      .swiper-slide:nth-child(8n),
      .swiper-slide:nth-child(8n) h3 {
        background-color: rgba(0, 68, 255, 0.4);
      }

      .swiper-slide:nth-child(9n),
      .swiper-slide:nth-child(9n) h3 {
        background-color: rgba(218, 12, 218, 0.4);
      }

      .swiper-slide:nth-child(10n),
      .swiper-slide:nth-child(10n) h3 {
        background-color: rgba(54, 94, 77, 0.4);
      }
      .swiper-wrapper .swiper-slide img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <!-- Swiper -->

    <div class="swiper mySwiper1">
      <div class="swiper-wrapper"></div>
    </div>

    <!-- Swiper JS -->
    <!-- <script src="../package/swiper-bundle.min.js"></script> -->
    <script src="./swiper//swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
      let index = 1;
      render(index);
      let flag = true;
      async function render(index = 1) {
        let res = await fetch(
          `https://m.maizuo.com/gateway?cityId=110100&pageNum=${index}&pageSize=10&type=1&k=6649808`,
          {
            method: "get",
            headers: {
              "X-Client-Info": `{"a":"3000","ch":"1002","v":"5.2.1","e":"1660393593336167090257921","bc":"110100"}`,
              "X-Host": ` mall.film-ticket.film.list`,
            },
          }
        ).then((res) => res.json());

        let data = res.data.films;
        data.forEach((item) => {
          $(
            `<div class="swiper-slide">
              <img src="${item.poster}" alt="">
              <h3>${item.name}</h3>
              <p>${item.synopsis}</p>
              </div>`
          ).appendTo($(".swiper-wrapper"));
        });
        console.log(res.data.films);
        if (data.length != 0) {
          flag = true;
        }
      }
      newSwiper();
      function newSwiper() {
        let swiper = new Swiper(".mySwiper1", {
          observer: true, //开启动态检查器
          effect: "cards",
          grabCursor: true,
          on: {
            slideChange: function () {
              console.log("改变了，activeIndex为" + this.activeIndex);
              if (this.activeIndex % 9 === 0) {
                if (flag) {
                  flag = false;
                  index++;
                  render(index);
                }
              }
            },
          },
        });
      }
      // 这个
    </script>
  </body>
</html>
